import React, { useState, useEffect } from 'react';
import { Form, Input, Cascader } from 'antd';
import './firstStep.less';
import {
  formAddressApi,
  formSaveDrafts,
  activityDetailApi,
} from '@/api/createActivity.js';
export default function (props) {
  const [options, setOptions] = useState([]);
  const [firstForm] = Form.useForm();
  useEffect(() => {
    add();
  }, []);

  async function getAddressFn(addressLevel, parentId) {
    return await formAddressApi({ addressLevel, parentId });
  }

  const jumpClick = (e) => {
    console.log(e.target.innerText);
    props.nextClick({ step: e.target.innerText });
  };

  async function add() {
    const res = await getAddressFn(1);
    if (res.data.code === 200) {
      let arr = res.data.data.map((item) => ({
        value: item.addressCode,
        label: item.addressName,
        isLeaf: false,
        parentId: item.addressCode,
      }));
      setOptions(arr);
    }
  }

  const lastClick = () => {
    firstForm.validateFields().then(() => {
      let b = firstForm.getFieldValue();
      props.nextClick({ step: 2, data: b });
    });
  };
  const saveClick = () => {
    console.log(firstForm.getFieldValue());
  };

  const loadData = (selectedOptions) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;

    setTimeout(async () => {
      targetOption.loading = false;
      const res = await getAddressFn(2, targetOption.parentId);

      if (res.data.code == 200) {
        targetOption.children = res.data.data.map((item) => ({
          label: item.addressName,
          value: item.addressCode,
        }));
        setOptions([...options]);
      }
    }, 200);
  };

  const pmEndValid = (rule, value, callback) => {
    if (!value) {
      return Promise.reject('不能为空');
      // callback('不能为空');
    }
    //  callback();
    return Promise.resolve();
  };
  return (
    <div>
      <div className="project-all">
        <div className="circle">1</div>
        <div className="wire"></div>
        <div
          className="circle1"
          onClick={(e) => {
            jumpClick(e);
          }}
        >
          2
        </div>
        <div className="wire"></div>
        <div className="circle1">3</div>
      </div>
      <div className="first-text">
        <div>项目基本信息</div>
      </div>
      <div className="first-item">
        <Form
          form={firstForm}
          name="basic"
          autoComplete="off"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
        >
          <div>
            <div>
              <Form.Item
                label="项目编号"
                name="projectNumber"
                validateTrigger="onBlur"
                rules={[
                  {
                    validator: pmEndValid,
                  },
                ]}
              >
                <Input style={{ width: '400px' }} />
              </Form.Item>
              <Form.Item
                label="项目名称"
                name="projectName"
                rules={[
                  {
                    required: true,
                    message: '请输入项目名称',
                  },
                ]}
              >
                <Input style={{ width: '400px' }} />
              </Form.Item>
              <Form.Item
                label="项目地区"
                name="activityArea"
                rules={[{ required: true, message: '请选择地区' }]}
              >
                <Cascader
                  style={{ width: '400px' }}
                  options={options}
                  loadData={loadData}
                  changeOnSelect
                  placeholder="请选择活动所属地区"
                />
              </Form.Item>
            </div>

            <Form.Item
              label="项目地点"
              name="activitySite"
              rules={[{ required: true, message: '请输入项目地点' }]}
            >
              <Input style={{ width: '400px' }} placeholder="请输入项目地点" />
            </Form.Item>
          </div>
        </Form>
      </div>
      <div className="all-btn">
        <div className="first-btn" onClick={lastClick}>
          下一步
        </div>
        <div className="first-btn1" onClick={saveClick}>
          保存草稿
        </div>
        <div className="first-btn1">取消</div>
      </div>
    </div>
  );
}
